<template>
  <view :class="['qn-page-' + theme]">
    <view class="top-fixed">
      <view class="search-wrap">
        <u-search
          placeholder="请输入门店名称"
          v-model="name"
          @custom="search"
          @search="search"
        ></u-search>
      </view>
      <RegionSel @pickerRegionChange="pickerRegionChange">
        <view class="region-wrap">
          <text>{{ areaName }}</text>
          <u-icon name="arrow-down-fill"></u-icon>
        </view>
      </RegionSel>
    </view>
    <view style="height: 110rpx"></view>
    <view class="store-ul">
      <view
        class="store-li clearfix"
        v-for="(item, index) in store_list"
        :key="index"
        @click="changeStore(item)"
      >
        <view class="float_left">
          <image class="logo" :src="item.logo" mode="aspectFill"></image>
        </view>
        <view class="store-info float_left">
          <view class="store-name ellipsis">{{ item.name }}</view>
          <view class="other-info clearfix">
            <view class="float_left">
              <text class="ibonfont ibonshijian"></text>
              <text v-if="item.openTime.isAllDay">全天营业</text>
              <text v-else
                >{{ item.openTime.start }}-{{ item.openTime.end }}</text
              >
            </view>
            <view class="float_right juli">{{ item.meters || "" }}</view>
          </view>
          <view class="other-info">
            <u-icon name="map-fill" size="28"></u-icon>
            <text
              >{{ item.area.provinceName }}{{ item.area.cityName
              }}{{ item.area.districtName }}{{ item.area.address }}</text
            >
          </view>
          <view class="other-info status-info clearfix">
            <view class="float_left" style="margin-right: 20rpx">
              <text class="success" v-if="item.enableStatus === 5">营业中</text>
              <text class="info" v-else>已打烊</text>
            </view>
            <view class="float_left" v-if="nowStore.id === item.id"
              ><u-tag mode="dark" size="mini" text="当前店铺" type="success"
            /></view>
            <view class="float_right">
              <text>切换店铺</text>
              <text class="ibonfont ibonjinru"></text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-loadmore :status="loading_status" />
  </view>
</template>

<script>
import RegionSel from "../components/region/RegionSel.vue";
export default {
  components: {
    RegionSel,
  },
  data() {
    return {
      name: "",
      loading_status: "nomore",
      tab_current: 0,
      tab_list: [{ name: "门店选择" }, { name: "常用/收藏" }],
      page: 1,
      pageSize: 10,
      store_list: [],
      pageTotal: 0,
      region: {},
      areaName: "全部区域",
    };
  },
  computed: {
    locationObj() {
      return this.$store.state.locationObj;
    },
    // 获取当前门店数据
    nowStore() {
      return this.$store.state.nowStore;
    },
  },
  onLoad() {
    this.shopGetAll();
  },
  onReachBottom() {
    if (this.pageTotal / this.pageSize > this.page) {
      this.page += 1;
      this.shopGetAll();
    }
  },
  onPullDownRefresh() {
    uni.startPullDownRefresh();
    this.page = 1;
    this.shopGetAll();
  },
  methods: {
    search() {
      this.page = 1;
      this.shopGetAll();
    },
    pickerRegionChange(e) {
      this.region = {
        province: e[0],
        city: e[1],
        area: e[2],
      };
      let areaName = "";
      if (e[2] && e[2].label) {
        areaName = e[2].label;
      } else if (e[1] && e[1].label) {
        areaName = e[1].label;
      } else if (e[0] && e[0].label) {
        areaName = e[0].label;
      }
      this.areaName = areaName || "全部区域";
      this.page = 1;
      this.shopGetAll();
    },
    shopGetAll() {
      this.$u.api
        .shopGetAll({
          page: this.page,
          pageSize: this.pageSize,
          longitude: this.locationObj.longitude, // 经度
          latitude: this.locationObj.latitude, //纬度
          name: this.name,
          provinceName: this.region.province ? this.region.province.label : "",
          cityName: this.region.city ? this.region.city.label : "",
          districtName: this.region.area ? this.region.area.label : "",
        })
        .then((res) => {
          uni.stopPullDownRefresh();
          if (this.page === 1) {
            this.store_list = res.data;
          } else {
            this.store_list = this.store_list.concat(res.data);
          }
          this.pageTotal = res.pageTotal;
          this.loading_status = this.$_utils.loadStatus(
            this.store_list.length,
            res.pageTotal
          );
        })
        .catch(() => {
          uni.stopPullDownRefresh();
        });
    },
    tabsChange(index) {
      this.tab_current = index;
    },
    changeStore(item) {
      let content = "确认切换到该门店吗?";
      if (this.nowStore.id === item.id) {
        content = "您选中的是当前所在店铺，是否返回上级页面继续下单？";
      }
      uni.showModal({
        title: "温馨提示",
        content: content,
        success: (res) => {
          if (res.confirm) {
            if (this.nowStore.id !== item.id) {
              this.$store.commit("commit_nowStore", item);
            }
            setTimeout(() => {
              uni.navigateBack();
            }, 500);
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    phoneCall(mobile) {
      uni.makePhoneCall({
        phoneNumber: mobile,
      });
    },
    openLocation(latitude, longitude) {
      uni.openLocation({
        latitude: latitude,
        longitude: longitude,
        name: this.locationObj.address,
        success: function () {
          console.log("success");
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.top-fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  padding: 10rpx 20rpx;
  display: flex;
  z-index: 10;
  .search-wrap {
    flex: 1;
  }
  .region-wrap {
    width: 200rpx;
    height: 30px;
    margin-left: 20rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .u-icon {
      margin-left: 10rpx;
    }
  }
}
.store-ul {
  padding: 0 20rpx;
  .store-li {
    padding: 20rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
    margin: 20rpx 0;
    box-shadow: 2px 2px 7px 1px rgba(234, 232, 232, 0.5);
    .logo {
      display: block;
      width: 268rpx;
      height: 200rpx;
      border: 1px solid #f5f5f5;
    }
    .store-info {
      width: 376rpx;
      margin-left: 20rpx;
      position: relative;
      height: 200rpx;
      .store-name {
        width: 410rpx;
        -webkit-line-clamp: 1;
        margin-bottom: 8rpx;
      }
      .other-info {
        font-size: 24rpx;
        margin-top: 10rpx;
        color: #9d9d9d;
        .ibonfont {
          font-size: 22rpx;
          margin-right: 4rpx;
          display: inline-block;
          width: 28rpx;
          text-align: center;
        }
      }
      .status-info {
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;
        color: #333333;
        .float_left {
          .success {
            color: $uni-color-success;
          }
          .info {
            color: #9d9d9d;
          }
        }
      }
    }
  }
}
</style>
